
//建一个构造函数 命名 ，小括号写参数：实例和触发行为
function Tabs(select,type="click"){    //形参
    this.ele = document.querySelector(select);   //获取接收到的实例

    this.btns = this.ele.querySelectorAll("ul>li"); //获取实例的点击元素
    this.boxs = this.ele.querySelectorAll("ol>li");  //获取实例的切换元素
    this.type = type;  //操作类型赋值

    this.init(); //当前实例调用方法--原型init
}

//Tabs构造函数的显式原型 init （把构造函数的方法挂载到原型上，避免额外资源浪费，这样同一个方法的地址是同一个）
//在函数的prototype里面存储的内容，不是给函数使用的，是给函数的每一个实例化对象使用的
Tabs.prototype.init = function(){       //构造函数.显示原型.命名
    this.btns.forEach((item,index)=>{    //实例引用，遍历实例数组的每一项，和每一项索引
        item.addEventListener(this.type,()=>{    //每一项的注册事件 ，行为发生后
            for(let i=0;i<this.btns.length;i++){   //走到循环 ，把点击元素和切换元素的样式清空
                this.btns[i].className = "";
                this.boxs[i].className = "";
            }
            this.btns[index].className = "active";  //清空后走到这里，点击的数组元素的索引号对应的样式添加为“active”
            this.boxs[index].className = "active";  //索引号对应的盒子的样式添加为“active”
        });
    });
};


